import React from 'react';

import { Tree, Card,Button } from 'antd';

const { TreeNode } = Tree;


class Demo extends React.Component {
  state = {
    gData: [
      {
        key: 1,
        title: '集团公司',
        children: [
          {key: 11, title: '营销中心',
            children: [
              {key:111, title: '市场部',
                children: [
                  {key:1111, title: '拓展1组',},
                  {key:1111, title: '拓展2组',}
                ]
              },
              {key:112, title: '销售部'},
            ]
          },
          {key: 12, title: '方案中心'},
          {key: 13, title: '研发中心'},
          {key: 14, title: '服务中心'},
        ]
      },
      {
        key: 2,
        title: '西南分公司',
        children: [
          {key: 21, title: '市场部'},
          {key: 22, title: '销售部'},
          {key: 23, title: '方案部'},
          {key: 24, title: '办公室'},
        ]
      }
    ],
    expandedKeys: ['1','11','111','2','22'],
  }


  render() {
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.title} />;
    });
    return (
      <Card bordered={false}>
        <div>
          <Button type="primary" htmlType="submit">
              新建部门
          </Button>
          <Tree
            defaultExpandedKeys={this.state.expandedKeys}
          >
            {loop(this.state.gData)}
          </Tree>
        </div>
      </Card>

    );
  }
}

export default Demo
